<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  HomeFilled,
  Reading,
  User,
  Memo,
  TrendCharts, // 症状及不良反应可以考虑
  CollectionTag, // 患教活动
  UserFilled, // 个人中心
} from '@element-plus/icons-vue' // 导入 Element Plus 图标

const router = useRouter()
const route = useRoute()

const activeMenu = ref(route.path)
const breadcrumb = ref('首页')
const username = ref(localStorage.getItem('username') || '用户')

// 根据 localStorage 判断用户角色
const role = ref('patient') // 默认值设为 'patient'

const menus = ref([])
const titles = ref({})

onMounted(() => {
  // 确保 role.value 被正确初始化
  const userRole = localStorage.getItem('userRole'); // 从 localStorage 获取实际角色
  role.value = userRole || 'patient'; // 如果没有则默认为 patient

  // 动态设置菜单和标题
  if (role.value === 'doctor') {
    menus.value = [
      { index: '/home/dashboard', label: '首页', icon: HomeFilled },
      { index: '/home/consultations', label: '看诊记录', icon: Reading },
      { index: '/home/patients', label: '患者信息', icon: User },
      { index: '/home/symptoms', label: '患者症状及不良反应', icon: TrendCharts },
      { index: '/home/education', label: '患教活动', icon: CollectionTag },
      { index: '/home/profile', label: '个人中心', icon: UserFilled },
    ]
    titles.value = {
      '/home/dashboard': '首页',
      '/home/consultations': '看诊记录',
      '/home/patients': '患者信息',
      '/home/symptoms': '患者症状及不良反应',
      '/home/education': '患教活动',
      '/home/profile': '个人中心',
    }
  } else {
    // 患者菜单
    menus.value = [
      { index: '/home/user_dashboard', label: '首页', icon: HomeFilled },
      { index: '/home/my_consultations', label: '我的看诊记录', icon: Memo },
      { index: '/home/patient_my_profile', label: '个人信息', icon: UserFilled },
    ]
    titles.value = {
      '/home/user_dashboard': '首页',
      '/home/my_consultations': '我的看诊记录',
      '/home/patient_my_profile': '个人信息',
    }
  }
})

// 根据路由变化更新选中菜单和面包屑
watch(
    () => route.path,
    (newPath) => {
      activeMenu.value = newPath
      breadcrumb.value = titles.value[newPath] || '首页'
    },
    { immediate: true } // 立即执行一次，确保初始加载时面包屑正确
)

const handleMenuSelect = (index) => {
  router.push(index)
}

const logout = () => {
  localStorage.clear()
  router.push('/login')
}
</script>

<template>
  <el-container class="common-layout">
    <el-aside width="200px" class="aside-menu">
      <div class="logo-area">
        <img src="@/assets/logo.svg" alt="Logo" class="app-logo" />
        <span class="app-title">医疗管理系统</span>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
          background-color="#2c3e50"
          text-color="#bfcbd9"
          active-text-color="#409eff"
          router
      >
        <el-menu-item
            v-for="item in menus"
            :key="item.index"
            :index="item.index"
        >
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="main-header">
        <div class="header-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user-info">
          <span class="welcome-text">欢迎，{{ username }}！</span>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-avatar :size="30" :src="'https://cube.elemecdn.com/0/88/03b0d407122812553630f295325648.jpeg'" />
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/home/profile')">个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
/* 整体布局容器 */
.common-layout {
  height: 100vh;
  overflow: hidden; /* 防止滚动条出现 */
  background-color: #f0f2f5; /* 页面整体背景色 */
}

/* 侧边栏样式 */
.aside-menu {
  background-color: #2c3e50; /* 深色背景 */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15); /* 侧边栏阴影 */
  transition: width 0.3s ease; /* 宽度过渡，如果后续有折叠功能 */
  display: flex;
  flex-direction: column;
}

.logo-area {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2c3e50; /* 保持与侧边栏一致的背景色 */
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 0 10px;
  box-sizing: border-box; /* 包含padding在内的宽度 */
}

.app-logo {
  height: 32px; /* Logo 图片高度 */
  margin-right: 10px;
}

.app-title {
  white-space: nowrap; /* 防止标题换行 */
}

.el-menu-vertical-demo {
  flex-grow: 1; /* 菜单占据剩余空间 */
  border-right: none; /* 移除Element UI默认边框 */
  padding-top: 10px; /* 菜单顶部留白 */
}

.el-menu-vertical-demo .el-menu-item {
  height: 50px; /* 菜单项高度 */
  line-height: 50px;
  color: #bfcbd9; /* 默认文字颜色 */
  font-size: 15px;
  margin-bottom: 5px; /* 菜单项之间间隔 */
  border-radius: 4px; /* 菜单项圆角 */
  margin: 0 10px; /* 左右边距 */
  width: calc(100% - 20px); /* 减去左右边距的宽度 */
}

.el-menu-vertical-demo .el-menu-item.is-active {
  background-color: #409eff !important; /* 选中项背景色 */
  color: #fff !important; /* 选中项文字颜色 */
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4); /* 选中项阴影 */
}

.el-menu-vertical-demo .el-menu-item:hover {
  background-color: #3a5068; /* 悬停背景色 */
  color: #409eff; /* 悬停文字颜色 */
}

.el-menu-vertical-demo .el-menu-item .el-icon {
  margin-right: 10px;
  color: inherit; /* 图标颜色继承文字颜色 */
  font-size: 18px;
}

/* 头部导航样式 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #ffffff; /* 白色背景 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 头部阴影 */
  padding: 0 20px;
  z-index: 10; /* 确保在内容之上 */
}

.header-breadcrumb {
  font-size: 14px;
  color: #606266;
}

.user-info {
  display: flex;
  align-items: center;
  color: #333;
}

.welcome-text {
  margin-right: 15px;
  font-size: 14px;
  color: #555;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-dropdown-link .el-icon--right {
  margin-left: 5px;
  color: #909399;
}

/* 主要内容区 */
.main-content {
  background-color: #f0f2f5; /* 与整体页面背景色一致 */
  padding: 20px;
  overflow-y: auto; /* 允许内容区域滚动 */
  box-sizing: border-box; /* 包含padding在内的尺寸 */
}

/* 如果你的页面内容本身有 padding，可以考虑在这里减少 main-content 的 padding */
/* .main-content > div {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: calc(100vh - 100px); // 示例：根据你的实际布局调整
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} */

/* 全局滚动条样式（可选，美化滚动条） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}
</style>